<template>
	<view class="hy_chart">
		<l-echart ref="chartRef"></l-echart>
	</view>
</template>

<script setup name="hyChart">
	import {
		onMounted,
		onUnmounted,
		watch,
		ref
	} from 'vue';
	// #ifdef MP
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
	// #endif

	const props = defineProps({
		option: {
			default: () => {
				return {}
			},
			type: Object,
			require: true
		}
	})
	const chartRef = ref(null)
	let st = null
	let myChart = null

	const initChart = async () => {
		if (!chartRef.value) return
		if (!myChart) myChart = await chartRef.value.init(echarts)
		myChart.setOption(props.option)
	}
	const changeOption = (option) => {
		if (!myChart) {
			initChart()
			return
		}
		myChart.setOption(props.option)
	}

	watch(() => props.option, value => changeOption(value))

	onMounted(() => {
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		st = setTimeout(() => {
			initChart()
		}, 300)
	})
	onUnmounted(() => {
		clearTimeout(st)
	})
</script>

<style>
	.hy_chart {
		width: 100%;
		height: 100%;
	}
</style>